<!-- <!DOCTYPE html>
<meta charset="utf-8" />
<canvas id="canvas-1" width="300" height="50"> </canvas>

<script>
    var canvas1 = document.getElementById('canvas-1')
    var ctx = canvas1.getContext('2d')
    ctx.fillStyle = '#eeeeee'
    ctx.fillRect(0, 0, canvas1.width, canvas1.height)
    ctx.font = '24px Microsoft YaHei'
    ctx.textBaseline = 'middle'
    ctx.textAlign = 'center'
    ctx.fillStyle = '#333333'
    ctx.fillText('简单教程，简单编程', canvas1.width / 2, canvas1.height / 2)
</script> -->

<!DOCTYPE html>
<meta charset="utf-8" />
<canvas id="canvas-2" width="400" height="100"> </canvas>

<script>
    var canvas1 = document.createElement('canvas')
    var ctx = canvas1.getContext('2d')
    canvas1.width = 300
    canvas1.height = 50
    ctx.fillStyle = '#eeeeee'
    ctx.fillRect(0, 0, canvas1.width, canvas1.height)
    ctx.font = '24px Microsoft YaHei'
    ctx.textBaseline = 'middle'
    ctx.textAlign = 'center'
    ctx.fillStyle = '#333333'
    ctx.fillText('简单教程，简单编程', canvas1.width / 2, canvas1.height / 2)

    var canvas2 = document.getElementById('canvas-2')
    var ctx2 = canvas2.getContext('2d')
    ctx2.fillStyle = 'green'
    ctx2.fillRect(0, 0, canvas2.width, canvas2.height)
    ctx2.drawImage(
        canvas1,
        (canvas2.width - canvas1.width) / 2,
        (canvas2.height - canvas1.height) / 2,
        canvas1.width,
        canvas1.height
    )
</script>
